import React, { Component } from 'react'

export default class Demo extends Component {
    render() {
        return (
            <div>
                demo
                {/* <A >
                    <B />
                </A> */}
                {/* 将B作为子组件插入到A中指定位置 */}
                <A render={(name) => <B name={name} />} />
            </div>
        )
    }
}

class A extends Component {
    state = { name: "Tom" }
    render() {
        return (
            <div>
                a
                {/* 通过标签属性（children props）展示B组件 */}
                {/* {this.props.children} */}
                {/* 类似于vue的插槽（render props） */}
                {this.props.render(this.state.name)}
            </div>
        )
    }
}

class B extends Component {
    render() {
        console.log(this);
        return (
            <div>
                b <br />
                {this.props.name}
            </div>
        )
    }
}